<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../common/testdata.js"></script>
		<style>
			#areaA, #areaB {
				margin: 50px 10px;
				width:320px;
				height:400px;
				float: left;
			}
		</style>
		<title>Tabview</title>
	</head>
	<body>
		<div id="areaA"></div>
		<div id="areaB">
			<div style="padding:10px">
				<input type="number" name="rank" /><br/>
				<input type="text" name="title" value="" placeholder="Book title" /><br/>
				<input type="date" name="year" value="" placeholder="Year" /><br/><br/>
				<input type="button" name="submit" value="Submit" onclick='$$("formView").save()'/>
			</div>
		</div>
		<script type="text/javascript" charset="utf-8">
			webix.ui({
				container: "areaA",
				borderless:true, 

				view:"tabview",
				cells:[
					{
						header:"List",
						body:{
							view:"list",
							template:"#rank#. #title# <div style='padding-left:18px'> Year:#year#, votes:#votes# </div>",
							type:{
								height:60
							},
							select:true,
							data:big_film_set
						}
					},
					{
						header:"Form",
						body:{
							id:"formView",
							view:"htmlform",
							content: "areaB",
							rules:{
								title: webix.rules.isNotEmpty,
								year: webix.rules.isNumber,
								rank: webix.rules.isNumber
							}
						}
					},
					{ header:"Empty", body:{ } }
				]
			});
		</script>
	</body>
</html>